<template>
  <div class="container">
    <header>
      <Header></Header>
    </header>
    <div class="fixed">
      <div>授课模式
        <span>4</span>大面+授课系统+全面物料
      </div>
      <div class="contact">
        <div><span class="opacity">4</span>咨询电话：</div>
        <div>138-3239-0170<span class="opacity">4</span></div>
      </div>
      <div class="QRcode">
        <div></div>
        <div>扫码咨询加盟</div>
      </div>
    </div>
    <div class="synopsis">
      <img src="./images/title_synopsis.png" alt="">
      <div class="contentSynopsis">
        <img src="./images/content_synopsis.png" alt="">
        <div>
          <div>云卓艺术作为专注于儿童美术教育的连锁机构，其理念和实践体现了对当前教育趋势的深刻理解和把握。在强调创造力培养的时代背景下，云卓艺术通过一系列科学、
            系统的教学方法，旨在激发孩子们的创造力，为他们的全面发展奠定坚实的基础。</div>
          <div>观察、想象、创造,让艺术触手可及</div>
        </div>
      </div>
    </div>
    <div class="idea">
      <img src="./images/title_idea.png" alt="">
      <div class="contentIdea">
        <div>
          <div>
            云卓艺术的立体教学理念是一种多维度、 全方位的教学模式，旨在为学生提供一种立体化的艺术学习体验。这一理念强调在多个层面和维度上展开教学活动，从而帮助学生全面而深入地理解艺术，并激发他们的创造力和创新精神。
          </div>
          <div>
            在教学内容上， 云卓艺术注重传统与现代、
            东方与西方的融合。它不仅教授传统的艺术技巧和知识，还引入现代艺术理论和创作方法，让学生在传承与创新中找到平衡。同时，云卓艺术也关注不同文化背景下的艺术表达，鼓励学生通过比较和借鉴，形成自己独特的艺术风格。
          </div>
          <div>
            在教学方式上，云卓艺术采用多元化的教学方法。除了传统的课堂教学外，还结合项目制学习、
            工作坊实践、艺术考察等多种形式，让学生在实践中学习和成长。这种立体化的教学方式有助于激发学生的学习兴趣和积极性，提高他们的艺术实践能力和解决问题的能力。
          </div>
          <div>
            云卓艺术还注重学生的个体差异和个性化发展。它尊重每个学生的兴趣和特长，
            提供个性化的教学计划和指导，让学生在适合自己的道路上发展。同时，云卓艺术也鼓励学生之间的合作与交流，通过集体创作和展示，培养他们的团队合作精神和创新能力。
          </div>
          <div>
            云卓艺术的立体教学理念还体现在对艺术教育的全面认识上。它认为艺术教育不仅是技能的培养更是人格的塑造和情感的表达。因此，在教学过程中，云卓艺术注重培养学生的审美情感、人文素养和批判性思维，帮助他们成为具有全面素养的艺术人才。
          </div>
        </div>
        <img src="./images/content_idea.png" alt="">
      </div>
    </div>
    <div class="teacher">
      <img src="./images/title_teacher.png" alt="">
      <div>
        <img class="contentTeacher" src="./images/content_teacher.png" alt="">
        <img src="./images/teacher1.png" alt="">
        <img src="./images/teacher2.png" alt="">
      </div>
    </div>
    <Footer></Footer>
    <div class="empty"></div>
  </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
  name: 'home',
  components: {
    Header,Footer
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
}

header {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url('./images/background.png');
}

.fixed {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  font-size: 24px;
  font-weight: 600;
  bottom: 0;
  background-color: #E5E5E5;
  z-index: 2;
}

span {
  font-size: 40px;
  font-weight: 900;
}

.opacity {
  opacity: 0;
}

.contact {
  display: flex;
  margin-left: 20px;
  background-color: white;
  border-radius: 10px;
}

.contact div:first-child {
  background-color: rgb(251, 218, 39);
  border-radius: 10px;
}

.QRcode {
  position: relative;
  width: 8vw;
  height: 200px;
  background-color: #E5E5E5;
  left: 50px;
  bottom: 50px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.QRcode div:first-child {
  width: 90%;
  height: 70%;
  margin: 10px 0;
  background-color: white;
  border-radius: 10px;
}

.synopsis {
  margin: 100px 0;
  width: 100%;
  height: 700px;
  background-image: url('./images/background_synopsis.png');
  background-size: 100% 100%;
  text-align: center;
}

.synopsis>img {
  margin: 80px 0;
}

.contentSynopsis {
  width: 70vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contentSynopsis>div {
  width: 40vw;
  margin-left: 100px;
  font-size: 24px;
}

.contentSynopsis>div div:last-child {
  font-weight: 700;
  margin-top: 10%;
}

.idea {
  margin: 100px 0;
  width: 100%;
  height: 700px;
  background-image: url('./images/background_idea.png');
  background-size: 100% 100%;
  text-align: center;
}

.contentIdea {
  width: 70vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.contentIdea>div {
  width: 60%;
}

.contentIdea>img {
  margin-left: 100px;
}

.contentIdea div {
  text-align: left;
  margin: 15px 5px;
  text-indent: 2em;
}

.teacher {
  margin-top: 100px;
  width: 100%;
  height: 850px;
  background-image: url('./images/background_teacher.png');
  background-size: 100% 100%;
  text-align: center;
}

.teacher>img{
  margin: 80px 0;
}

.teacher>div{
  display: flex;
  justify-content: space-around;
  width: 80vw;
  margin: 0 auto;
}

.contentTeacher{
  position: relative;
  top: 50px;
}

.empty{
  width: 100%;
  height: 10vh;
}
</style>